<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">添加</el-button>
      </div>
      <!-- 卡片内容 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" width="180" type="index">
        </el-table-column>
        <el-table-column prop="tmName" label="品牌名称" width="180">
        </el-table-column>
        <el-table-column prop="address" label="品牌LOGO">
          <template v-slot="{ row }">
            <img :src="row.logoUrl" alt="" width="100px">
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="mini" @click="changeTm(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteTm(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
        :page-sizes="[3, 5, 7, 9]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>


      <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">


        <el-form 
        :model="ruleForm"
        :rules="rules"
         ref="ruleForm" 
         label-width="100px" 
         class="demo-ruleForm">
          <el-form-item label="品牌名称" prop="tmName">
            <el-input v-model="ruleForm.tmName" ></el-input>
          </el-form-item>
          
          <el-form-item label="品牌LOGO" prop="logoUrl">
            <el-upload class="avatar-uploader" 
            :action="`${baseURL}/admin/product/fileUpload`" 
            :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

         
        </el-form>



        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="cencle">取 消</el-button>
          <el-button type="primary" @click="addTrademark">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>


  </div>

</template>

<script>
import { reqTradeMarkList, reqchangeTm, reqsaveTradeMark, reqDeleteTradeMark } from '@/api/product/trademark'
import {cloneDeep} from 'lodash'
export default {
  name: "tradeMark",
  data() {

    return {
      page: 1,
      limit: 4,
      total: 1,
      tableData: [], // 分页数据
      dialogVisible: false,//显示添加或修改
      baseURL: process.env.VUE_APP_BASE_API,  //代理
      imageUrl: '',
      ruleForm: {
        tmName: "", //双向绑定收集名字
        logoUrl: "", //logo图片
      },
      rules:{
        tmName: [
          {
            required: true,
            message: "请输入品牌名称",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: "blur",
          },
        ],
        logoUrl: [
          {
            required: true,
            message: "请添加品牌logo",
            trigger: "blur",
          },
        ],
      }

    }
  },
  methods: {
    handleSizeChange(val) {
      this.getTradeMarkList()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.getTradeMarkList()
      console.log(`当前页: ${val}`);
    },

    //
    async getTradeMarkList() {

      let result = await reqTradeMarkList(this.page, this.limit);
      if (result) {

        console.log(result)
        this.tableData = result.records
        this.total = result.total
        this.limit = result.size
      }

    },

    //
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },

    handleAvatarSuccess(res, file) {
      this.ruleForm.logoUrl = URL.createObjectURL(file.raw);
      console.log(this.ruleForm.logoUrl, res,'res');
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    // 5.点击确认提交
    async addTrademark(){
      // 获取表单数据
      let ruleForm = this.$refs.ruleForm
      // 校验
      let result = ruleForm.validate()
      if(!result) return ;

      if(this.ruleForm.id){
        await reqchangeTm(this.ruleForm)
        this.$message.success('修改成功');
        this.getTradeMarkList()
      }else{
        try{
          await reqsaveTradeMark(this.ruleForm.tmName,this.ruleForm.logoUrl)
          this.$message.success('新增成功');
          this.getTradeMarkList()
        }catch(e){
          console.log(e)
        }

      }
      this.dialogVisible = false;
      this.ruleForm = {
        tmName: '',
        logoUrl: '',
      }
    },

    // 6.点击删除
    async deleteTm(id){

      await reqDeleteTradeMark(id);
      this.$message.success('删除成功');
      this.getTradeMarkList()
    },

    // 7.点击修改
     changeTm(row){
       this.ruleForm = cloneDeep(row)
       this.dialogVisible = true;

    },

    // 8.点击取消
    cencle(){
      this.dialogVisible = false;
      this.ruleForm = {
        tmName: '',
        logoUrl: '',
      }
    }

  },
  mounted() {
    this.getTradeMarkList()
  },
  watch() {

  }
}
</script>

<style  >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>